<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref} from 'vue'
import { useRouter } from 'vue-router'
import {verifyAPI} from '@/apis/user'
import { questions,answers,Password } from '@/apis/security'
import { toRaw } from 'vue';

const activeStep = ref(0) // 当前步骤
const username = ref('') //这个和下面那个，我不知道这两是干什么的
const newPassword = ref('')
const userAnswers = ref({}) // 用户填写的答案
const router = useRouter()


// 获取安全问题
const Quest=ref([])
const getQuestions=async(account)=>{
  const res=await questions(account)
  Quest.value=res
}

const checkUserExist = async () => {
  const res = await verifyAPI({ account: username.value });

  if (res) {
    await getQuestions(username.value )
    activeStep.value = 1; // 用户名匹配，跳转到第二步
  } else {
    alert('用户名不存在'); // 用户名不匹配，提示错误
  }
};



const b=userAnswers.value




// 安全验证
const Secure = async () => {
const rawAnswers = toRaw(b);  // 将响应式对象转换为原始对象
// 将 userAnswers 对象转换为接口需要的数组格式
const answer = Object.keys(rawAnswers).map(id => ({
    questionId: parseInt(id),  // 将 ID 转换为整数
    answer: rawAnswers[id]    // 获取用户输入的答案
  }));
  // 打印经过处理后的 answer
  console.log(answer);
    const response = await answers(username.value, answer);
    if (response) {
      alert('验证成功！');
      // 假设验证成功后切换到下一步
      activeStep.value = 2;
    } else {
      alert(`验证失败: ${response.message}`);
    }
};

// 密码重置
const resetPassword = async () => {
  const response = await Password(username.value, newPassword.value);

  // 假设密码重置成功
  if (response) {
  alert('密码重置成功')
  router.replace({ path: '/login' }) // 跳转到登录页面
}else {
      alert(`密码重置失败: ${response.message}`);
    }
}
</script>

<template>
  <div id="container">
    <!--发现了个规律只有设置id的时候才能够-->

    <!-- 输入用户名判断用户是否存在 -->
    <div class="section" :class="{ active: activeStep === 0 }">
      <div class="container">
        <h3>用户验证</h3>
        <input v-model="username" placeholder="请输入用户名" />
        <button @click="checkUserExist">提交</button>
      </div>
    </div>

    <!-- 用户存在则进行下一步的安全性验证 -->
    <div class="section" :class="{ active: activeStep === 1 }">
      <div class="container">
        <h3>安全验证</h3>
        <form>
          <div v-for="item in Quest" :key="item.id" class="answer">
            <label :for="`${item.id}`">{{ item.question }}</label
            ><!--这个里for的作用是使得每个标签能与相应的输入框关联-->
            <input v-model="userAnswers[item.id]" :id="`${item.id}`" placeholder="请输入答案" />
          </div>
          <!--input中v-modle与:id的相关作用分别为确保用户在每个输入框中输入的答案能够存储到 userAnswers 对象中，便于后端提交时使用；
                 保证每个输入框的 id 唯一，从而保证 label 标签能够正确地关联到输入框。-->
          <button @click.prevent="Secure">提交</button>
          <!--这里可能出现一些问题：点击按钮时没有正确阻止表单的默认提交行为，可能会导致页面刷新，从而重置 activeStep 的值-->
        </form>
      </div>
    </div>

    <!-- 安全性验证通关则进行密码重置 -->
    <div class="section" :class="{ active: activeStep === 2 }">
      <div class="container">
        <h3>密码重置</h3>
        <input v-model="newPassword" placeholder="请输入新密码" type="password"/>
        <button @click="resetPassword">提交</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#container {
  width: 100%; /* 占满宽度 */
  height: 100vh; /* 占满高度 */
  display: flex; /* 启用 Flexbox 布局 */
  justify-content: space-between; /* 水平排列 */
  align-items: flex-start; /* 如果需要顶部对齐 */
}
.container {
  display: flex; /* 启用 Flexbox */
  flex-direction: column; /* 按竖直方向排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 80%;
}

.section {
  width: 33.2%; /* 每个部分占据30%的宽度 */
  height: 100vh;
  padding: 5px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0.5; /* 默认是灰暗状态 */
  transition: opacity 0.3s ease; /* 渐变效果 */
  display: flex; /* 启用 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.section.active {
  opacity: 1; /* 高亮显示 */
  background-color: #e0f7fa; /* 高亮部分的背景色 */
  box-shadow: 0 0 10px rgba(0, 183, 255, 0.8); /* 边框发光效果 */
}

h3 {
  margin-bottom: 10px;
}

input,
button {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 14px;
}

button {
  cursor: pointer;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}
.answer input {
  width: 100%; /* 让输入框占满父容器的宽度 */
  padding: 8px; /* 调整内边距，让输入框更大 */
  box-sizing: border-box; /* 确保内边距和边框被包含在宽度内 */
}
</style>
